<template>
  <div class="nav">
    <a href="###" :class="{active : changeclass}" @click="dismis()">
      <span class="icon_index"></span>
      <strong>首页</strong>
    </a>
    <a href="###"  @click="dismis()">
      <span class="icon_brand"></span>
      <strong>品牌</strong>
    </a>
    <a href="###" @click="dismis()" >
      <span class="icon_classify"></span>
      <strong>分类</strong>
    </a>
    <a href="###" @click="dismis()" >
      <span class="icon_cart"></span>
      <strong>购物车</strong>
    </a>
    <a href="###" @click="dismis()" >
      <span class="icon_my"></span>
      <strong>我的</strong>
    </a>
  </div>
</template>

<script>
export default {
  data:function(){
    return {
      changeclass:false
    }
  },
  methods:{
    dismis(){
      this.changeclass = !this.changeclass;
    }
  }
};
</script>

<style scoped lang="scss">
.nav {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  a {
    display: inline-block;
    span {
      display:block;
      width:.666667rem;
      height:.666667rem;
      background: url(../images/icon.png) no-repeat;
      background-size:150% auto;
      margin:0 auto;
      
    }
    .active{
      color:#1b9015;
    }
    .icon_index{
        background-position:0 0;
      }
    .icon_brand{background-position:0 -25px}
    .icon_classify{background-position:0 -50px}
    .icon_cart{background-position:0 -75px}
    .icon_my{background-position:0 -100px}
    strong {
      font-size: .32rem;
      line-height: .586667rem;
      color: #fff;
      font-weight: 400;
    }
    
  }
}

</style>